import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()

const textColor = appStore.getIsDark ? '#fff' : '#797676'

export const pieOptions1 = () => {
  return {
    color: [
      "#30e254",
      "#e82b1d",
      "#dff045",
      "#c1c8c2"
    ],
    tooltip: {
      trigger: 'item',
      position: ['50%', '50%'],
      formatter: function (params) {
        return `<div style="width:100px;">${params.name}: ${params.value}</div>`;
      }
    },
    title: {
      text: "",
      subtext: '',
      textStyle: {
        color: textColor,
        fontSize: 12,
        fontWeight: 'lighter'
      },
      subtextStyle: {
        fontSize: 14,
        color: "#000"
      },
      left: "center",
      top: "18%",
    },
    grid: {
    },
    legend: {
      top: "65%",
      orient: 'vertical',
      itemWidth: 10,
      itemHeight: 10,
      icon: "circle",
      data: [],
      show: true,
      textStyle: {
        fontSize: 14,
        rich: {
          name: {
            color: "#333333",
            fontSize: 14,
            padding: [5, 10, 5, 0],
          },
          value: {
            color: '#9441b1',
            fontSize: 14,
            padding: [5, 40, 5, 40],
          }
        },
      },
      formatter: name => `{name| ${name}} {percent| }%`
    },
    series: [
      // 主要展示层的
      {
        hoverAnimation: true,
        radius: ["45%", "55%"],
        center: ["50%", "30%"],
        type: "pie",
        label: {
          normal: {
            show: false,
            formatter: "{b}: {d}\n{c}%",
            textStyle: {
              fontSize: 14,
            },
            position: "outside",
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
            length: 10,
            length2: 15,
          },
          emphasis: {
            show: false,
          },
        },
        name: "",
        data: [],
      }
    ],
  };
}
export const pieOptions2 = () => {
  return {
    color: [
      "#4AEAB0", "#0E7CE2", "#eee", "#FF8352"
    ],
    tooltip: {
      trigger: 'item',
      position: ['50%', '50%'],
      formatter: function (params) {
        return `<div style="width:100px;">${params.name}: ${params.value}</div>`;
      }
    },
    title: {
      text: "",
      subtext: '',
      textStyle: {
        color: textColor,
        fontSize: 12,
        fontWeight: 'lighter'
      },
      subtextStyle: {
        fontSize: 14,
        color: "#000"
      },
      left: "center",
      top: "18%",
    },
    grid: {
    },
    legend: {
      top: "65%",
      orient: 'vertical',
      itemWidth: 10,
      itemHeight: 10,
      icon: "circle",
      data: [],
      show: true,
      textStyle: {
        fontSize: 14,
        rich: {
          name: {
            color: "#333333",
            fontSize: 14,
            padding: [5, 10, 5, 0],
          },
          value: {
            color: '#9441b1',
            fontSize: 14,
            padding: [5, 40, 5, 40],
          }
        },
      },
      formatter: name => `{name| ${name}} {percent| }%`
    },
    series: [
      // 主要展示层的
      {
        hoverAnimation: true,
        radius: ["45%", "58%"],
        center: ["50%", "30%"],
        type: "pie",
        itemStyle: {
          normal: {
            borderColor: '#fff',
            borderWidth: 2,
          },
        },
        label: {
          normal: {
            show: false,
            formatter: "{b}: {d}\n{c}%",
            textStyle: {
              fontSize: 14,
            },
            position: "outside",
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
            length: 10,
            length2: 15,
          },
          emphasis: {
            show: false,
          },
        },
        name: "",
        data: [],
      }
    ],
  };
}
export const pieLegendOptions = () => {
  return {
    color: [
      "#06FDBC", "#F6FE05", "#07B0FE", "#FDB408", "#00DB1C", "#0188FE"
    ],
    tooltip: {
      trigger: 'item',
      position: ['50%', '50%'],
      formatter: function (params) {
        return `<div style="width:100px;">${params.name}: ${params.value}</div>`;
      }
    },
    title: {
      text: "总数",
      subtext: '',
      textStyle: {
        color: textColor,
        fontSize: 14,
        fontWeight: 'lighter'
      },
      subtextStyle: {
        fontSize: 16,
        color: "#000",
        fontWeight: 'bolder'
      },
      left: "center",
      top: "38%",
    },
    grid: {
    },
    legend: {
      left: '35%',
      data: [],
      top: "center",
      orient: "vertical",
      icon: "circle",
      itemWidth: 12,
      itemGap: 50,
      textStyle: {
        fontSize: 14,
        rich: {
          name: {
            color: "#333333",
            fontSize: 14,
            padding: [5, 10, 5, 0],
          },
          value: {
            color: '#666',
            fontSize: 14,
            padding: [5, 100, 5, 100],
          },
          percent: {
            color: '#18DB9F',
            fontSize: 14,
            padding: [5, 0, 5, 10],
          }
        },
      },
      formatter: name => `{name| ${name}} {percent| }%`
    },
    series: [
      // 主要展示层的
      {
        radius: ["75%", "90%"],
        center: ["20%", "50%"],
        type: "pie",
        label: {
          normal: {
            show: false,
            formatter: "{b}: {d}\n{c}%",
            textStyle: {
              fontSize: 14,
            },
            position: "outside",
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
            length: 10,
            length2: 15,
          },
          emphasis: {
            show: false,
          },
        },
        name: "",
        data: [],
      }
    ],
  };
}
